<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title></title>
</head>
<body>
	用户名： <input type="" name="">
	<p style="color: red;"></p >

	<select>
		<option value="mjq">马嘉祺</option>
		<option value="dcx">丁程鑫</option>
		<option value="syx">宋亚轩</option>
		<option value="lyw">刘耀文</option>
		<option value="zzy">张真源</option>
		<option value="yhx">严浩翔</option>
		<option value="hjl">贺俊霖</option>
	</select>
	<script type="text/javascript">
		let inp = document.querySelector("input")
		let p = document.querySelector("p")
		let select = document.querySelector("select")

		// 表单失去焦点
		inp.onblur = function(){
			p.innerText = ""
			if (!this.value) {
				p.innerText = "用户名不能为空"
			}else if (this.value.length < 5){
				p.innerText = "用户名格式不正确"
			}
		}


		// 表单获取焦点
		inp.onfocus = function(){

		}

		// 表单值改变的时候 select input
		inp.onchange = function(){
			console.log("改变了")
		}

		select.onchange = function(){
			console.log("选项更改了", this.value)
		}
	</script>
</body>
</html>